<template>
	<view class="news_swiper">
		<u-swiper :list="list" height="479" mode="none" :autoplay="false" @click="previewImage" border-radius="0" :circular="false"
		 indicator-pos="topRight" @change="handleChange">

		</u-swiper>
		<view class="count_con">
			<text>{{index}}</text><text>/</text><text>{{list.length}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				// list: [{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 		title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
				// 		title: '身无彩凤双飞翼，心有灵犀一点通'
				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
				// 		title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// 	}
				// ],
				index: 1
			};
		},
		created() {

		},
		methods: {
			/**
			 * 预览图片
			 */
			previewImage(index) {
				uni.previewImage({
					count: this.list.length,
					current: index, //预览图片的下标
					urls: this.list.map(item=>{
						return item.image;
					})
				})
			},
			handleChange(index) {
				this.$emit("change", index)
				this.index = index + 1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";

	.news_swiper {
		width: 100%;
		position: relative;
		padding-top: 206rpx;
		padding-bottom: 30rpx;

		.count_con {
			position: absolute;
			color: #fff;
			right: 25rpx;
			top: 0;
			font-size: 26rpx;
			font-weight: 400;
			>text {
				&:nth-child(1) {
					color: #EB4D3C;
					font-size: 49rpx;
				}

				&:nth-child(2) {
					margin-left: 5rpx;
					margin-right: 5rpx;
				}
			}
		}
	}

	/deep/.u-list-image-wrap {
		background: #000000
	}
</style>
